@charset "UTF-8";

/**************
 * Scrollbars *
 **************/

 // FIXME: need to adjust the color of slider.
 
scrollbar {
    $_slider_min_length: 40px;

    // disable steppers
    @at-root * {
        -GtkScrollbar-has-backward-stepper: false;
        -GtkScrollbar-has-forward-stepper: false;
    }

    background-color: gtk("@theme_widget_background_normal");
    transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &.top { border-bottom: 1px solid gtk("@theme_widget_border_normal"); }
    &.bottom { border-top: 1px solid gtk("@theme_widget_border_normal"); }
    &.left { border-right: 1px solid gtk("@theme_widget_border_normal"); }
    &.right { border-left: 1px solid gtk("@theme_widget_border_normal"); }

    &:backdrop {
        background-color: gtk("@theme_widget_background_backdrop");
        border-color: gtk("@theme_widget_border_backdrop");
        transition: 200ms ease-out;
    }

    // slider
    slider {
        min-width: 6px;
        min-height: 6px;
        margin: -1px;
        border: 4px solid transparent;
        border-radius: $RadiusBig;
        background-clip: padding-box;

        background-color: gtk("@theme_bare_background_normal");

        &:hover { 
            background-color: gtk("@theme_bare_background_hover");
        }

        &:active,
        &:checked {
            background-color: gtk("@theme_bare_background_checked");
        }

        &:backdrop {
            background-color: gtk("@theme_bare_background_backdrop");
        }

        &:disabled {
            background-color: transparent;
        }
    }

    &.overlay-indicator {
        &:not(.dragging):not(.hovering) {
            border-color: transparent;
            opacity: 0.4;
            background-color: transparent;

            slider {
                margin: 0;
                min-width: 3px;
                min-height: 3px;
                background-color: gtk("@theme_bare_background_normal");
            }

            button {
                min-width: 5px;
                min-height: 5px;
                background-color: gtk("@theme_widget_background_normal");
                background-clip: padding-box;
                border-radius: 100%;
                -gtk-icon-source: none;
            }

            &.horizontal {
                slider {
                    margin: 0 2px;
                    min-width: $_slider_min_length;
                }

                button {
                    margin: 1px 2px;
                    min-width: 5px;
                }
            }

            &.vertical {
                slider {
                    margin: 2px 0;
                    min-height: $_slider_min_length;
                }

                button {
                    margin: 2px 1px;
                    min-height: 5px;
                }
            }
        }

        &.dragging,
        &.hovering { 
            opacity: 0.8; 
        }
    }

    &.horizontal slider {
        min-width: $_slider_min_length;
    }

    &.vertical slider {
        min-height: $_slider_min_length;
    }

    // button styling
    button {
        padding: 0;
        min-width: 12px;
        min-height: 12px;
        border-style: none;
        border-radius: 0;
        transition-property: min-height, min-width, color;

        @include button(undecorated);

        color: gtk("@theme_widget_foreground_normal");

        &:hover {
            @include button(undecorated);

            color: gtk("@theme_widget_foreground_hover");
        }

        &:active, &:checked {
            @include button(undecorated);

            color: gtk("@theme_widget_foreground_active");
        }

        &:disabled {
            @include button(undecorated);

            color: gtk("@theme_widget_foreground_insensitive");
        }

        &:backdrop {
            @include button(undecorated);

            color: gtk("@theme_widget_foreground_backdrop");

            &:disabled {
                @include button(undecorated);

                color: gtk("@theme_widget_foreground_backdrop_insensitive");
            }
        }
    }

    // button icons
    &.vertical {
        button {
            &.down {
                -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
            }

            &.up {
                -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
            }
        }
    }

    &.horizontal {
        button {
            &.down {
                -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
            }

            &.up {
                -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
            }
        }
    }
}